<template>
    <div class="home-container">
        <!-- 导航栏(顶部搜索框) -->
        <van-nav-bar fixed>
            <template #title>
                <van-button type="primary" round size="small" icon="search" class="search-btn" to="/search">搜索</van-button>
            </template>
        </van-nav-bar>

        <!-- Tab标签页 -->
        <!-- animated：切换时的动画效果  swipeable：滑动内容切换 -->
        <van-tabs v-model="active" animated swipeable class="tab-bq">
            <van-tab :title="channel.name" v-for="channel in channels" :key="channel.id">
                <!-- 文章列表组件 -->
                    <article-list :channel="channel" ref="articleList"></article-list>
            </van-tab>
            <!-- 插槽 -->
            <template #nav-right>
                <!-- 占位内容，防止最后一个标签被汉堡按钮遮盖 -->
                <div class="placeholder"></div>
                <!-- 汉堡按钮 -->
                <div class="hamburg-btn" @click="show = true">
                    <i class="iconfont icon-gengduo"></i>
                </div>
            </template>
        </van-tabs>

        <!-- 频道编辑弹出层 -->
        <van-popup v-model="show" closeable close-icon-position="top-left" position="bottom" :style="{ height: '100%' }">
            <channel-edit :myChannels="channels" :activeId="active" @updateActiveId="changeChannel"></channel-edit>
        </van-popup>
    </div>
</template>

<script>
import ArticleList from './article-list.vue'
import ChannelEdit from './channel-edit.vue'
import { getUserChannels } from '@/api/user'
import { getItem } from '@/utils/storage'

export default {
    name: 'HomeIndex',
    components: {
        ArticleList,
        ChannelEdit
    },
    data() {
        return {
            active: 0,
            show: false, //控制弹出层的显示
            channels: [], // 频道列表
            scrollTopList: [] // 记录所有频道页面的滚动条位置
        }
    },
    methods: {
        // 加载我的频道数据
        loadChannels() {
            // 已登录用户
            if (this.$store.state.user) {
                getUserChannels().then(({ data }) => {
                    this.channels = data.data.channels
                }).catch((err) => {
                    this.$toast('获取频道数据失败')
                })
            } else {
                // 未登录用户
                if(getItem('TOUTIAO_CHANNELS')) {
                    // 如果能获取到本地数据，则用本地的
                    this.channels = getItem('TOUTIAO_CHANNELS')
                } else {
                    // 否则用线上的默认数据
                    getUserChannels().then(({ data }) => {
                        this.channels = data.data.channels
                    }).catch((err) => {
                        this.$toast('获取频道数据失败')
                    })
                }
            }
        },
        // 切换频道, isShow 控制弹出层显示或关闭
        changeChannel(index, isShow) {
            this.active = index
            this.show = isShow
        }
    },
    created() {
        this.loadChannels()
    },

    //此钩子函数会反复触发,是keep-alive特有的钩子函数
    activated() {
        // 第一次页面加载时也会触发activated(), 此时scrollTopList还没有数据，所以下面需要if判断
        if(this.scrollTopList.length) {
            this.scrollTopList.forEach((item, index) => {
                // console.log(item)
                this.$refs.articleList[index].$el.scrollTop = item
            })
        }
    },

    //路由离开时的钩子函数
    beforeRouteLeave (to, from, next) {
        const arrList = this.$refs.articleList
        // 每次离开当前路由，记得清空scrollTopList
        this.scrollTopList = []
        arrList.forEach((item) => {
            // console.log(item.$el)
            this.scrollTopList.push(item.$el.scrollTop) 
        })
        next()
    }
}
</script>

<style lang="less" scoped>
.home-container {
    padding-bottom: 100px;

    // 这里如果不加/deep/，样式会不生效
    /deep/ .van-nav-bar__title {
        max-width: 100%;
    }

    .search-btn {
        width: 555px;
        height: 64px;
        background-color: #5babfb;
        border: none;
        font-size: 28px;
    }

    /deep/ .tab-bq {
        margin-top: 92px;

        .van-tab {
            color: #777;
            font-size: 30px;
        }

        .van-tab--active {
            color: #333;
        }

        .van-tabs__line {
            width: 31px;
            height: 6px;
            background-color: #3296fa;
        }

        .placeholder {
            flex-shrink: 0; //不参与flex剩余空间计算
            height: 88px;
            width: 46px;
        }

        .hamburg-btn {
            background-color: #fff;
            opacity: 0.9;
            height: 88px;
            width: 66px;
            position: fixed;
            right: 0;
            display: flex;
            justify-content: center;
            align-items: center;

            &::before {
                content: '';
                position: absolute;
                left: 0;
                background-image: url(../../assets/gradient-gray-line.png);
                background-size: contain;
                width: 2px;
                height: 100%;
            }

            .icon-gengduo {
                font-size: 34px;
            }
        }
    }

}
</style>
